<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getDataLists" @newAdd="newAddClick">
    </na-table>
    <!-- 选择退料单 -->
    <el-dialog v-dialogDrag title="选择退料单" :visible.sync="isTreasuryVisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input v-model="treasurySearch.likeWords" prefix-icon="el-icon-search" placeholder="输入关键字" size="small"
              @keyup.enter.native="getTreasuryList">
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder pt0" style="padding: 16px">
          <el-table v-loading="treasuryLoading" :data="treasuryList" height="560" :row-class-name="tableRowClassName"
            border style="width: 100%">
            <el-table-column prop="backMaterialBillNo" label="退料单号" min-width="160" />
            <el-table-column prop="backMaterialTypeName" label="退料类型" min-width="100" />
            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip min-width="110" />
            <el-table-column prop="backMaterialPersonName" label="退料人员" min-width="100" />
            <el-table-column prop="equipmentName" label="退料机台" min-width="90" />
            <el-table-column prop="backMaterialKindCount" label="明细" show-overflow-tooltip min-width="120" />
            <el-table-column prop="sumQuantity" label="总数量" show-overflow-tooltip min-width="120" />
            <el-table-column prop="xieYiShuHao" label="业务订单号" show-overflow-tooltip min-width="120" />
            <el-table-column prop="customerBillNo" label="客户单号" show-overflow-tooltip min-width="120" />
            <el-table-column prop="orderProductName" label="产品名称" show-overflow-tooltip min-width="120" />
            <!-- <el-table-column
              prop="productCode"
              label="产品编码"
              show-overflow-tooltip
              min-width="120"
            /> -->
            <el-table-column prop="createPersonName" label="创建人员" min-width="90" />
            <el-table-column prop="backMaterialRemark" label="备注" min-width="150" show-overflow-tooltip>
              <template scope="{row}">
                {{ row.backMaterialRemark || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="medium" style="color: #606266" @click="confirmSelecd(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isTreasuryVisible=false">取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="confirmSelecd"
        >确定</el-button>
      </span> -->
    </el-dialog>
    <!--  新建/编辑退料入库   -->
    <el-dialog :title="ops === 'modify'?'编辑退料入库':'新建退料入库'" :visible.sync="isAddDialog" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">入库单号：</span>{{ instockForm.inStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ instockForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ ops === 'modify'? instockForm.createorName : name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="instockForm" :model="instockForm" :rules="rules" label-width="95px" label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="入库类型">
                  <el-input v-model="instockForm.inStockTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="instockForm.associationBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="instockForm.inStockProductPersonName" placeholder="请输入内容" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="退料设备">
                  <el-input v-model="instockForm.equipmentName" placeholder="退料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="instockForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="instockForm.orderProductName" placeholder="orderProductName" size="mini"
                    disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="instockForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="instockForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="产品编码">
                  <el-input v-model="instockForm.productCode" placeholder="productCode" size="mini" disabled />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退料备注" class="inlineText">
                  <el-input v-model="instockForm.produceMaterialRemark" type="textarea" :rows="1" placeholder="请输入退料备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="入库备注" class="inlineText mt5" prop="outStockBillRemark">
                  <el-input v-model="instockForm.inStockBillRemark" type="textarea" :rows="1" placeholder="请输入入库备注"
                    size="mini" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox lastTdNoBorder">
            <div class="tt flex flex_between">
              <span class="fw">退料明细</span>
            </div>
            <el-table v-loading="infoLoading" :data="instockForm.detailList" border style="width: 100%">
              <el-table-column label="物料编号" prop="stockGoodsCode" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料类型" prop="goodsCategoryName" min-width="90" />
              <el-table-column label="供应商" prop="supplierName" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料名称" prop="goodsName" show-overflow-tooltip min-width="110" />
              <el-table-column label="规格型号" prop="stockGoodsName" min-width="90" />
              <el-table-column label="库存数量" show-overflow-tooltip min-width="90" prop="stockQuantity" />
              <el-table-column label="领料数量" prop="applyGetQuantity" show-overflow-tooltip min-width="110" />
              <el-table-column label="退料数量" prop="backQuantity" min-width="90" />
              <el-table-column label="物料单位" show-overflow-tooltip min-width="90" prop="goodsUnitName" />
              <el-table-column label="库位" prop="stockArea" min-width="150">
                <template slot-scope="{row}">
                  <el-cascader v-model="row.stockArea" size="mini" clearable :options="storageLocations"
                    :props="{label: 'name', value: 'code'}" />
                </template>
              </el-table-column>
              <el-table-column label="备注" show-overflow-tooltip min-width="150" prop="backRemark" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddDialog=false">取 消</el-button>
        <!-- 拒绝       -->
        <el-button :loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading" type="warning"
          size="mini" @click="refuseOut">拒绝</el-button>
        <!--  同意      -->
        <el-button :loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading" type="primary"
          size="mini" @click="saveAdd">同意</el-button>
      </div>
    </el-dialog>
    <!--  查看退料入库   -->
    <el-dialog title="查看退料入库" :visible.sync="isSeevisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">入库单号：</span>{{ instockForm.inStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ instockForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span class="mr15"><span class="mr5">创建人员：</span>{{ instockForm.createPersonName}}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="instockForm" :model="instockForm" :rules="rules" label-width="95px" label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="入库类型">
                  <el-input v-model="instockForm.inStockTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="instockForm.associationBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="instockForm.backPersonName" placeholder="请输入内容" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="退料设备">
                  <el-input v-model="instockForm.equipmentName" placeholder="退料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="instockForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="instockForm.orderProductName" placeholder="orderProductName" size="mini"
                    disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="instockForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="instockForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="产品编码">
                  <el-input v-model="instockForm.productCode" placeholder="productCode" size="mini" disabled />
                </el-form-item>
              </el-col> -->
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退料备注" class="inlineText">
                  <el-input v-model="instockForm.backMaterialRemark" type="textarea" :rows="1" placeholder="请输入退料备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="入库备注" class="inlineText mt5" prop="outStockBillRemark">
                  <el-input v-model="instockForm.inStockBillRemark" type="textarea" :rows="1" placeholder="请输入入库备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox lastTdNoBorder">
            <div class="tt flex flex_between">
              <span class="fw">退料明细</span>
            </div>
            <el-table v-loading="infoLoading" :data="instockForm.detailList" border style="width: 100%">
              <el-table-column label="物料编号" prop="goodsCode" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料类型" prop="categoryName" min-width="90" />
              <el-table-column label="供应商" prop="supplierName" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料名称" prop="goodsName" show-overflow-tooltip min-width="110" />
              <el-table-column label="规格型号" prop="stockGoodsName" min-width="90" />
              <el-table-column label="库存数量" show-overflow-tooltip min-width="90" prop="stockQuantity" />
              <el-table-column label="领料数量" prop="getMaterialQuantity" show-overflow-tooltip min-width="110" />
              <el-table-column label="退料数量" prop="backMaterialQuantity" min-width="90" />
              <el-table-column label="物料单位" show-overflow-tooltip min-width="90" prop="goodsUnitName" />
              <el-table-column label="库位" prop="fullKqName" min-width="150" />
              <el-table-column label="备注" show-overflow-tooltip min-width="150" prop="inStockRemark" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible=false">取 消</el-button>
        <!--  确定     -->
        <el-button type="primary" size="mini" @click="isSeevisible=false">确定</el-button>
      </div>
    </el-dialog>
    <!--    拒绝原因弹框-->
    <el-dialog title="拒绝原因" :visible.sync="reasonVisible" :close-on-click-modal="false" custom-class="comDialog"
      append-to-body width="30%" @close="closeCancelDialog">
      <div class="dialogDody">
        <el-form ref="cancelForm" :model="cancelForm" :rules="cancelRules" label-width="0px" class="dialogForm">
          <el-form-item label="" prop="stockStateDesc">
            <el-input v-model="cancelForm.stockStateDesc" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入内容"
              size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button v-loading="addLableLoading" :disabled="addLableLoading" element-loading-spinner="el-icon-loading"
          type="primary" size="mini" @click="refuseInstock">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import MixA from '@/utils/mixin'
  import {
    arraySort
  } from '@/utils'
  import naTable from "@/components/naTable";
  const mixa = new MixA()
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: '',
    components: {
      naTable
    },
    mixins: [mixa],
    computed: {
      ...mapGetters([
        'name',
        'userInfo'
      ])
    },
    data() {
      return {
        ops: 'add',
        isSeevisible: false, // 查看弹框是否显示
        addLableLoading: false, // 拒绝按钮加载效果
        reasonVisible: false, // 拒绝领料出库弹框是否显示
        infoLoading: false, // 明细列表加载
        isAddDialog: false, // 新建弹框显示隐藏
        addLoading: false, // 按钮加载效果
        treasuryLoading: false, // 退料单列表加载
        isTreasuryVisible: false, // 退料单选择弹框显示隐藏
        searchLoading: false, // 退料入库列表加载效果
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          likeWords: '',
          inStockType: '' // 入库类型
        },
        total: 0,
        dataList: [],
        tableHead: [], // 表头
        tableHeight: null,
        radioSelect: null,
        treasuryList: [], // 退料单列表
        treasurySearch: {
          saleOrderNo: '',
          likeWords: ''
        },
        currentRow: {}, // 交库单列表单选选中值
        instockForm: {
          inStockType: '', // 入库类型
          inStockTypeName: '退料入库', // 入库类型名称
          associationBillNo: '', // 关联单据号
          inStockProductPerson: '', // 申请人员code
          inStockProductPersonName: '', // 申请人员name
          produceMaterialRemark: '', // 退料备注
          inStockBillRemark: '', // 入库备注
          equipmentNo: '', // 使用设备编码
          equipmentName: '', // 使用设备name
          productDeviceName: '', // 生产设备名称
          detailList: []
        },
        storageLocations: [], // 库区库位
        cancelForm: {
          stockStateDesc: ''
        },
        rules: {

        },
        cancelRules: {
          stockStateDesc: [{
            required: true,
            message: '请填写拒绝原因',
            trigger: 'change'
          }]
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'inStockID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          // addTitle: '', //新建按钮名称-为''则不显示，为undefine则为新建
          addPermission: 'MenuCode5-2-2-1', //新建按钮权限
          addIcon: '', //新建按钮icon
          voidWord: '', //需要查询作废的字段
          statusList: [], //状态筛选条件列表
          statusWord: '', //状态筛选的字段
          refresh: true, //刷新按钮
          //表格按钮
          operationBtn: [{
            title: '查看', //按钮名称
            methodsName: 'seeInfo', //按钮绑定方法的字段
          }],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },
      }
    },
    created() {
      // 退料入库表头
      this.getTableHead()
      // 库区库位
      this.getStorageLocations()
    },
    mounted() {},
    methods: {
      // 拒绝保存事件
      refuseInstock() {
        this.$refs.cancelForm.validate((valid) => {
          if (valid) {
            this.addLableLoading = true
            const params = {
              backMaterialBillNo: this.instockForm.associationBillNo,
              inStockRefuseReason: this.cancelForm.stockStateDesc
            }
            this.$api.warehouse.RefuseBackProduceMaterialBill(params).then(() => {
              this.$message({
                message: '已拒绝',
                type: 'success'
              })
              this.getDataLists()
              this.isAddDialog = false
              this.reasonVisible = false
            }).catch(() => {
              this.addLableLoading = false
            })
          }
        })
      },
      // 拒绝入库点击事件
      refuseOut() {
        this.reasonVisible = true
      },
      // 同意入库
      saveAdd() {
        let isVer = true
        for (let i = 0; i < this.instockForm.detailList.length; i++) {
          if (this.instockForm.detailList[i].stockArea.length < 1) {
            isVer = false
            break
          }
          this.instockForm.detailList[i].warehouseAreaCode = this.instockForm.detailList[i].stockArea[0]
          this.instockForm.detailList[i].areaShelfCode = this.instockForm.detailList[i].stockArea[1]
        }
        if (isVer) {
          const params = this.instockForm
          this.addLoading = true
          this.$api.warehouse.AddTLInStockBill(params).then(() => {
            this.$message({
              message: '入库成功',
              type: 'success'
            })
            this.getDataLists()
            this.isAddDialog = false
            this.addLoading = false
          }).catch(() => {
            this.addLoading = false
          })
        } else {
          this.$message({
            message: '请选择相应入库库位',
            type: 'warning'
          })
        }
      },
      // 新建退料点击事件
      newAddClick() {
        this.isTreasuryVisible = true
        // 获取退料单列表
        this.getTreasuryList()
      },
      // 查看点击事件
      seeInfo(data) {
        this.isSeevisible = true
        this.ops = 'see'
        this.getInfo(data.inStockID)
      },
      // 退料入库详情
      getInfo(id) {
        const params = {
          queryBy: 1,
          queryValue: id
        }
        this.infoLoading = true
        this.$api.warehouse.GetSingleTLInStockBill(params).then(res => {
          const arr = [...res.detailList]
          arr.forEach(item => {
            const newArr = []
            newArr.push(item.warehouseAreaCode, item.areaShelfCode)
            item.stockArea = newArr
          })
          this.instockForm = res
          this.instockForm.productVersion = res.printingSurface + res.productVersion
          this.infoLoading = false
        }).catch(() => {
          this.infoLoading = false
        })
      },
      // 退料单选择确认事件
      confirmSelecd(row) {
        const arr = JSON.parse(JSON.stringify(row.mxDataList))
        arr.forEach(item => {
          item.stockArea = []
        })
        this.instockForm.detailList = arr
        this.instockForm.associationBillNo = row.backMaterialBillNo
        this.instockForm.inStockProductPerson = row.backMaterialPerson
        this.instockForm.inStockProductPersonName = row.backMaterialPersonName
        this.instockForm.equipmentNo = row.equipmentNo
        this.instockForm.equipmentName = row.equipmentName
        this.instockForm.produceMaterialRemark = row.backMaterialRemark
        this.instockForm.produceTaskBillNo = row.produceTaskBillNo
        this.instockForm.productVersion = row.printingSurface + row.productVersion
        this.instockForm.productCode = row.productCode
        this.instockForm.customerBillNo = row.customerBillNo
        this.instockForm.orderProductName = row.orderProductName

        this.isTreasuryVisible = false
        this.isAddDialog = true
      },
      // 库区库位
      getStorageLocations() {
        const parmas = {
          warehouseCode: ''
        }
        this.$api.warehouse.GetStockQueryAreaTreeView(parmas).then(res => {
          this.storageLocations = res
        })
      },
      // 给选中一行添加class
      tableRowClassName({
        row
      }) {
        if (this.currentRow.backMaterialBillNo === row.backMaterialBillNo) {
          return 'selectd'
        }
      },
      // 获取退料单列表
      getTreasuryList() {
        this.treasuryLoading = true
        this.$api.warehouse.GetMatchBackProduceMaterialBills(this.treasurySearch).then(res => {
          this.treasuryList = res
          this.treasuryLoading = false
        }).catch(() => {
          this.treasuryLoading = false
        })
      },
      // 退料入库表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.tlInStockBillList
        }
        this.$api.common.getAllTableHead(parmas).then(res => {
          res.sort(arraySort('columnSort'))
          this.tableData.thead = res;
          // 领料出库列表
          this.getDataLists()
        })
      },
      // 退料入库列表
      getDataLists() {
        const params = this.search
        this.searchLoading = true
        this.$api.warehouse.GetMatchPageTLInStockBills(params).then(res => {
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false
        }).catch(() => {
          this.searchLoading = false
        })
      },
      closeDialog() {
        if (this.$refs.instockForm) {
          this.$refs.instockForm.resetFields()
        }
        this.instockForm = this.$options.data().instockForm
      },
      closeCancelDialog() {
        if (this.$refs.cancelForm) {
          this.$refs.cancelForm.resetFields()
        }
        this.cancelForm = this.$options.data().cancelForm
      }
    }
  }

</script>
<style lang="scss" scoped>
  .spot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .addWuliaoBox {
    padding: 10px 16px;

    .tableBox {
      margin-top: 16px;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      overflow: hidden;

      .tt {
        height: 38px;
        line-height: 38px;
        padding-left: 16px;
        background: #f7f8fa;
        border-radius: 8px 8px 0 0;
      }
    }
  }

</style>
<style lang="scss">
  .selectd {
    td {
      background: #3f61f110
    }
  }

</style>
